<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <f7-app :routes="routes">
        <f7-view main>
          <f7-page>
            <f7-navbar title="Login Screen"></f7-navbar>
            <f7-block>
              <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:</p>
            </f7-block>
      
            <f7-list>
              <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
            </f7-list>
      
            <f7-block>
              <f7-button raised big fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
            </f7-block>
      
            <f7-block>
              <f7-button raised big fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
            </f7-block>
      
            <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
              <f7-page login-screen>
                <f7-login-screen-title>Framework7</f7-login-screen-title>
                <f7-list form>
                  <f7-list-input
                    label="Username"
                    type="text"
                    placeholder="Your username"
                    :value="username"
                    @input="username = $event.target.value"
                  ></f7-list-input>
                  <f7-list-input
                    label="Password"
                    type="password"
                    placeholder="Your password"
                    :value="password"
                    @input="password = $event.target.value"
                  ></f7-list-input>
                </f7-list>
                <f7-list>
                  <f7-list-button @click="signIn">Sign In</f7-list-button>
                  <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
                </f7-list>
              </f7-page>
            </f7-login-screen>
          </f7-page>
        </f7-view>
      </f7-app>
    </template>
    <template id="login-screen-page">
      <f7-page no-toolbar no-navbar no-swipeback login-screen>
        <f7-login-screen-title>Framework7</f7-login-screen-title>
        <f7-list form>
          <f7-list-input
            label="Username"
            type="text"
            placeholder="Your username"
            :value="username"
            @input="username = $event.target.value"
          ></f7-list-input>
          <f7-list-input
            label="Password"
            type="password"
            placeholder="Your password"
            :value="password"
            @input="password = $event.target.value"
          ></f7-list-input>
        </f7-list>
        <f7-list>
          <f7-list-button @click="signIn">Sign In</f7-list-button>
          <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
        </f7-list>
      </f7-page>
    </template>
    <script>
      var routes = [
        {
          path: '/login-screen-page/',
          component: {
            template: '#login-screen-page',
            data() {
              return {
                username: '',
                password: '',
              };
            },
            methods: {
              signIn() {
                const self = this;
                const app = self.$f7;
                const router = self.$f7router;
                app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
                  router.back();
                });
              },
            },
          }
        }
      ];
      var component = {
        data() {
          return {
            loginScreenOpened: false,
            username: '',
            password: '',
            routes: routes,
          };
        },
        methods: {
          signIn() {
            const self = this;
            const app = self.$f7;
      
            app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
              app.loginScreen.close();
            });
          },
        },
      }
    </script>
    <script src="../../packages/vue/vue.min.js"></script>
    <script src="../../packages/vue/framework7-vue.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7Vue, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      if (typeof component === 'undefined') {
        var component = {};
      }
      if (typeof routes === 'undefined') {
        var routes = [];
      }
      component.el = '#app';
      component.template = '#app-template';
      
      new Vue(component);
    </script>
  </body>
</html>